<template>
  <div class="wrap">
    <div class="title">
      <i class="icon"></i>
      <p>猜你喜欢</p>
    </div>
    <div class="main">
      <el-carousel
        trigger="click"
        :autoplay="false"
        arrow="always"
        @change="handelchange"
      >
        <el-carousel-item v-for="item in 4" :key="item.id">
          <ul>
            <li
              v-for="item in itemlist"
              :key="item.id"
              @click="handerfn(item.id)"
            >
              <img :src="item.picture" alt="" />
              <p>{{ item.name }}</p>
              <p>￥{{ item.price }}</p>
            </li>
          </ul>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import youlike from "@/api/cart";
export default {
  data() {
    return {
      list: [],
      itemlist: [],
    };
  },
  name: "youlikeview",
  created() {
    this.youlikelist();
  },
  methods: {
    // 跳转详情页
    handerfn(id) {
      this.$router.push({ path: "/home/details", query: { id } });
    },
    // 猜你喜欢数据
    async youlikelist() {
      let res = await youlike.youlike({ limit: 16 });
      this.list = res.data.result;
      this.splicearr(0);
    },
    // 点击选项卡
    handelchange(val) {
      this.splicearr(val);
    },
    // 封装数组数据
    splicearr(val) {
      let result = [];
      for (let i = 0; i < Math.ceil(this.list.length / 4); i++) {
        let start = i * 4;
        let end = start + 4;
        result.push(this.list.slice(start, end));
      }
      this.itemlist = result[val];
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 1240px;
  background: white;
  margin: 0 auto;
  .title {
    display: flex;
    align-items: center;
    padding: 30px;
    i {
      width: 16px;
      height: 16px;
      display: inline-block;
      border-top: 4px solid #27ba9b;
      border-right: 4px solid #27ba9b;
      box-sizing: border-box;
      position: relative;
      transform: rotate(45deg);
      &::after {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        left: 0;
        top: 2px;
        background: #bcf1e6;
      }
    }
    p {
      margin-left: 10px;
      font-size: 20px;
    }
  }
  .main {
    padding: 0 20px;
    box-sizing: border-box;
    .el-carousel {
      height: 320px;
    }
    /deep/.el-carousel__button {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.2);
    }
    /deep/.el-carousel__indicator.is-active button {
      background: #27ba9b;
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }

    .el-carousel__item {
      padding: 0 80px;
      background-color: white;
      box-sizing: border-box;
    }
    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        width: 200px;
        text-align: center;
        img {
          width: 200px;
          height: 200px;
        }
        p {
          width: 170px;
          &:nth-child(2) {
            white-space: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            color: #666;
            margin: 15px 0;
          }
          &:nth-child(3) {
            color: red;
          }
        }
      }
    }
  }
}
</style>